<template>
  <div class="navbar">
    <el-menu
      :default-active="route.fullPath"
      class="el-menu-demo"
      mode="horizontal"
      :router = "true"
    >
      <span class="left"><div>物业门户官网</div></span>
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/news">新闻中心</el-menu-item>
      <el-menu-item index="/work">工作展示</el-menu-item>
      <el-menu-item index="/myself">记录中心</el-menu-item>
      <el-menu-item index="/payment">缴费中心</el-menu-item>

    </el-menu>
    <div class="right">
      
      <span>欢迎 {{store.state.webuserInfo.propname}} 业主</span>
      <el-dropdown>
                <span class="el-dropdown-link">
                    <el-icon :size="30"><User /></el-icon>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="handleCenter">记录中心</el-dropdown-item>
                        <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>

                    </el-dropdown-menu>
                </template>
            </el-dropdown>
    </div>
  </div>
  
</template>

<script setup>
import {User} from "@element-plus/icons-vue";
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore()
const route = useRoute()
const router = useRouter()
const handleClick = ()=>{
    // window.location = "http://localhost:8080"
    // window.location = "http://localhost:8081/#/login"
}

const handleCenter = ()=>{ //个人中心跳转
    router.push("/myself")
    }
const handleLogout = ()=>{ //退出跳转
    localStorage.removeItem("token")
    store.commit("clearUserInfo")
    router.push("/")
    }
</script>

<style scoped lang="scss">
.navbar{
    position: sticky;
    top:0px;
    z-index: 1000;
}
.right{
    position: fixed;
    top: 0;
    right: 20px;
    // widows:100px;
    height: 59px;
    line-height: 59px;
    text-align: center;
}
.left{

      margin-left: 10px;
      height: 58px;
      line-height: 58px;

    }
    .right{
      display: flex;
        .el-dropdown{
            margin: auto;
            padding-left: 10px;
        }
    }
</style>
